<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '登录',
  },
}
</route>

<template>
  <view class="w-full h-100vh overflow-hidden flex flex-col items-center">
    <view class="bg-#07c160 w-120vw h-100vw rounded-full -mt-40 flex flex-col justify-end">
      <view class="w-full flex flex-col items-center mb-2">
        <text class="text-#fff text-32rpx">欢迎登录</text>
        <text class="text-#fff text-32rpx mt-2 mb-2">{{ appName }}</text>
        <wd-img :width="100" :height="100" :src="logo">
          <template #error>
            <view class="w-200rpx h-200rpx center">
              <text class="text-#fff">加载失败</text>
            </view>
          </template>
          <template #loading>
            <view class="w-200rpx h-200rpx center">
              <wd-loading :size="20" color="#07c160" />
            </view>
          </template>
        </wd-img>
      </view>
    </view>

    <!-- 一键登录按钮 -->
    <view class="w-80vw h-80rpx bg-#07c160 rounded-40rpx mt-40 center">
      <!-- #ifdef MP-WEIXIN -->
      <text class="text-#fff text-32rpx w-full h-full center" @click="handleAgree">一键登录</text>
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <text class="text-#fff text-32rpx w-full h-full center" @click="handleAgree">
        手机号快捷登录
      </text>
      <!-- #endif -->
    </view>

    <!-- 隐私协议 -->
    <view
      class="w-full flex justify-center items-center mt-20"
      :class="isErrorStatus ? 'error-status' : ''"
    >
      <wd-checkbox checked-color="#07c160" v-model="isAgree">
        <text class="text-#666 text-24rpx">我已阅读并同意</text>
        <text class="text-#07c160 text-24rpx">《隐私协议》</text>
        <text class="text-#666 text-24rpx">和</text>
        <text class="text-#07c160 text-24rpx">《用户协议》</text>
      </wd-checkbox>
    </view>
  </view>
</template>

<script lang="ts" setup name="Login">
import logo from '@/static/logo.svg'
import { useToast } from 'wot-design-uni'
const appName = import.meta.env.VITE_APP_TITLE || ''
const isAgree = ref<boolean>(false)
const isErrorStatus = ref<boolean>(false)
const toast = useToast()

const handleAgree = () => {
  if (!isAgree.value) {
    isErrorStatus.value = true
    setTimeout(() => {
      isErrorStatus.value = false
    }, 500)
    uni.showToast({
      title: '请先阅读并勾选协议',
      icon: 'none',
      duration: 3000,
    })
    uni.vibrateShort()
  }
  // #ifdef MP-WEIXIN
  // 一键登录
  handleLogin()
  // #endif
  // #ifndef MP-WEIXIN
  // 手机号一键登录
  console.log('手机号一键登录')
  // #endif
}

const handleLogin = () => {
  // 登录
  console.log('登录')
  // uni.login({
  //   provider: 'weixin',
  //   onlyAuthorize: true,
  //   success: (loginRes) => {
  //     console.log(loginRes)
  //   },
  //   fail: (err) => {
  //     console.log(err)
  //   },
  // })
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (chooseImageRes) => {
      console.log(chooseImageRes)
    },
    fail: (err) => {
      console.log(err)
    },
  })
}
</script>

<style lang="scss" scoped>
//
.error-status {
  animation: shake 0.5s !important;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-10rpx);
  }
  30% {
    transform: translateX(10rpx);
  }
  45% {
    transform: translateX(-10rpx);
  }
  60% {
    transform: translateX(10rpx);
  }
  75% {
    transform: translateX(-10rpx);
  }
  100% {
    transform: translateX(0);
  }
}
</style>
